<!DOCTYPE html>
<html>
<head>
     <title></title>
     <style>
     	#box{
     		width: 300px;
        height:425px;
     		margin: 100px auto;
     		position: relative;
        border:1px solid #eee;
        box-shadow: 0px 3px 5px skyblue;
     	}

      #list{
        margin:0;
        padding:0;
        list-style: none;
        position:absolute;
        top:400px;
      }

      #list li{
        width:5px;
        height:5px;
        border:1px solid #f90;
        float:left;
        margin-left:10px;
        border-radius:5px;
      }

     	#p1,#p2,#p3,#p4,#p5{
     		left: 0px;
     		top: 0px;
     		position: absolute;
     		opacity:0;
     	}
     	
     </style>
</head>
<body>
    <div id="box">
    	<img id="p1" src="./imgs/1.png" width='300px' style="opacity:1">
    	<img id="p2" src="./imgs/2.jpg" width='300px' >
    	<img id="p3" src="./imgs/3.jpg" width='300px' >
    	<img id="p4" src="./imgs/4.jpg" width='300px' >
    	<img id="p5" src="./imgs/5.jpg" width='300px' >


      <ul id="list">
        <li id="l1" ></li>
        <li id="l2" ></li>
        <li id="l3" ></li>
        <li id="l4" ></li>
        <li id="l5" ></li>
      </ul>
    </div>
</body>

    <script>

    	var i = 1;

    	var imgs = document.getElementById("box").getElementsByTagName("img");

      var img1 = img2 = null;

    	var tnum = 0;
    	
      var isDo = false;

		  var tid = setInterval(pic,3000);

      var j =0;

     	function pic(){

       		var str1 = "p" + i;

       		img1 = document.getElementById(str1);

       		if (i>=5) 
       		{
       			i=1;
       		}
       		else
       		{
       			i++;
       		}

  		  	var str2 = "p" + (i);

  	     	img2 = document.getElementById(str2);

          j=0;

          test();
     	}

      function test(){

        j += 0.1;

        if(j>=1)
        {
          isDo = false;

          return;
        }

        img1.style.opacity = 1-j;

        img2.style.opacity = j;

        setTimeout(test,100);
      }


      var list = document.getElementById("list");

      var lis = list.getElementsByTagName("li");

      for(var k=0;k<lis.length;k++)
      {
          lis[k].onmouseover = (function(){

            this.style.backgroundColor = "#f90";

            console.log(this.id);

            // clearInterval(tid);
            // i=parseInt(this.id);


            // pic();

            // setInterval(pic,3000);
        });

        lis[k].onmouseout = (function(){
          this.style.backgroundColor = "";
        });
      }

     


      
     	
      


      

     	
       


     
    </script>
</html>